<template>
  <by-background background="#ffffff"/>

  <by-navigation-bar />

  <view class="form">
    <view class="margin-bottom-210">
      <text class="text-44 color-t1 text-bold">手机号登录/注册</text>
    </view>

    <view class="form-item margin-bottom-20">
      <input v-model="form.tel" type="number" class="text-30" maxlength="11" placeholder="请输入手机号" placeholder-class="color-placeholder"/>
    </view>

    <view class="form-item flex-row align-center">
      <input v-model="form.verifyCode" type="text" class="text-30 flex-item margin-right-50" maxlength="6" placeholder="请输入验证码" placeholder-class="color-placeholder"/>
      <by-get-code :phone="form.tel"/>
    </view>

    <view class="margin-top-140">
      <by-button height="88rpx" font-size="32rpx" bold text="登录" :check-login="false" @click="handleLogin"/>
    </view>

    <view class="flex-row flex-center margin-top-30">
      <by-radius size="26rpx" value-size="18rpx" pain v-model="isAgree">
        <agree-text />
      </by-radius>
    </view>
  </view>

  <by-dialog v-model="showModel" title="提示" @confirm="agree">
    <view class="margin-top-40">
      <agree-text />
    </view>
  </by-dialog>

  <view class="footer text-center">
    <text class="text-24 color-grey">未注册的手机号码验证后自动注册</text>
    <by-safe-area-bottom></by-safe-area-bottom>
  </view>
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import AgreeText from './agree-text.vue'
import { mobile } from '@/common/test'
import { login, getUserInfo } from '@/common/api'
import { jump, toast, loading } from '@/common/util'

const userStore = useUserStore()
const load = ref(false)
const isAgree = ref(false)
const showModel = ref(false)
const form = reactive({
  tel: '',
  verifyCode: ''
})

function agree() {
  showModel.value = false
  isAgree.value = true
  handleLogin()
}

async function handleLogin() {
  if (load.value) {
    return
  }
  if (!mobile(form.tel)) {
    toast('手机号码不正确')
    return
  }
  if (!form.verifyCode) {
    toast('请输入验证码')
    return
  }

  if (!isAgree.value) {
    showModel.value = true
    return
  }

  load.value = true
  setTimeout(() => {
    load.value = false
  }, 500)
  const l = loading('登录中...')
  const res = await login(form)
  getUserInfo()
  l.hide()
  userStore.userData = res.data
  jump()
  toast('登录成功')
  load.value = false
  /* #ifdef H5*/
  wxLogin()
  /* #endif*/
}

/* #ifdef H5*/
function wxLogin() {
  const redirect_uri = encodeURI(location.href).split('#')[0]
  const arr = redirect_uri.split('/')
  const a = arr.slice(0, 3)
  const uri = a.join('/')
  const appid = 'wxcf1cc727fb788b08'
  const wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
  location.href = wx_url
}
/* #endif*/

</script>

<style scoped lang="scss">
@include setMargin(bottom, 210);

@include setMargin(top, 140);

.form{
  padding: 50rpx 66rpx 0;

  .form-item{
    border-bottom: 2rpx solid #D9D9D9;
    padding: 30rpx 0;
  }

}

.footer{
  @include position(fixed, $bottom:50rpx, $left:0, $right:0);
}
</style>
